<template>
  <div>
    <text class="p-2">头像</text>
    <div class="bg-gray align-center"
         @click="pickHead">
      <image class="head"
             :src="farmHeadImg || 'bmlocal://assets/farm/farm_img_head_default.png'"></image>
    </div>

    <text class="p-2">背景</text>
    <div @click="pickTop">
      <image class="farm-top-img"
             :src="farmTopImg || 'bmlocal://assets/farm/farm_bg_default.jpg'"></image>
    </div>

  </div>
</template>
<script>
import VmButton from '../../components/vm-button.vue'
import {
  DEFAULT_CLIENT_ID,
  STORAGE_FARM,
  EVENT_GET_FARM_REFRESH
} from '../../plugins/constant'

export default {
  components: { VmButton },
  props: {},
  data() {
    return {
      farmHeadImg: '',
      farmTopImg: ''
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getFarm()
  },
  methods: {
    getFarm() {
      this.farm = this.$storage.getSync(STORAGE_FARM) || {}

      const images = this.farm.images
      this.farmHeadImg = images && images.length && images[0] || ''
      const headImg = this.farm.farmTopImages
      this.farmTopImg = headImg && headImg.length && headImg[0] || ''
    },
    setFarm() {
      if (this.farm.id === DEFAULT_CLIENT_ID) { return }
      this.$http({
        method: 'GET',
        name: 'industrial.farm.info',
        data: {
          farmId: this.farm.id
        }
      }).then(res => {
        this.farm = res
        this.$storage.setSync(STORAGE_FARM, res)
      })
    },
    pickHead() {
      this.$picture.pick({
        maxCount: 1,
        ratioX: 1,
        ratioY: 1,
        allowCrop: true,
      }).then(res => {
        this.uploadOss(res, 1)
      }).catch(err => {
        this.$notice.toast({ message: '选择图片失败，请重试！' })
      })
    },
    pickTop() {
      this.$picture.pick({
        maxCount: 1,
        ratioX: 2,
        ratioY: 1,
        allowCrop: true,
      }).then(res => {
        this.uploadOss(res, 2)
      }).catch(err => {
        this.$notice.toast({ message: '选择图片失败，请重试！' })
      })
    },
    uploadOss(images, type) {
      this.$oss.uploadImage({
        files: images
      }).then(res => {
        if (type === 1) {
          this.postHeadImg(res[0])
        } else[
          this.postTopImage(res[0])
        ]
      }).catch(err => {
        this.$notice.toast({ message: '上传图片失败，请重试！' })
      })
    },
    postHeadImg(image) {
      this.$http({
        method: 'PUT',
        name: 'industrial.farm.info.put',
        data: {
          id: this.farm.id,
          farmImages: image ? `["${image}"]` : ''
        },
        errorMsg: '修改失败，请重试！'
      }).then(res => {
        this.farmHeadImg = image
        this.$notice.toast({ message: '修改成功！' })
        this.$router.setBackParams({ type: 1 })
        this.$event.emit(EVENT_GET_FARM_REFRESH, {})
        this.setFarm()
      })
    },
    postTopImage(image) {
      this.$http({
        method: 'PUT',
        name: 'industrial.farm.info.put',
        data: {
          id: this.farm.id,
          farmTopImages: image ? `["${image}"]` : ''
        },
        errorMsg: '修改失败，请重试！'
      }).then(res => {
        this.farmTopImg = image
        this.$notice.toast({ message: '修改成功！' })
        this.$router.setBackParams({ type: 1 })
        this.$event.emit(EVENT_GET_FARM_REFRESH, {})
        this.setFarm()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../css/variables.scss";

.p-2 {
  padding: 20px;
}
.bg-white {
  background-color: #fff;
}
.bg-gray {
  background-color: $gray-500;
}
.align-center {
  align-items: center;
}
.small {
  font-size: 28px;
}
.text-muted {
  color: #999;
}
.border-y {
  border-top-width: 1px;
  border-top-color: $border-color;
  border-bottom-width: 1px;
  border-bottom-color: $border-color;
}

.head {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  border-width: 3px;
  border-color: #fff;
}
.farm-top-img {
  width: 750px;
  height: 300px;
}
</style>
